<html>
<head>
    <meta name='layout' content='main'/>
    <title><g:message code="springSecurity.login.title"/></title>
</head>

<body>

<div if="loginView" align="center" style="padding-top: 10px">
    <table width="1000px" style="table-layout: fixed;" cellspacing="0">
        <tr>
            <td width="30%" style="border-right: 1px solid gray; border-collapse: collapse; padding-right: 20px; padding-left: 20px;">
                <div align="left" style="padding-bottom: 3px"><b>Probar</b></div>
            </td>
            <td width="30%" style="border-right: 1px solid gray; border-collapse: collapse;padding-right: 20px; padding-left: 20px;">
                <div align="left" style="padding-bottom: 3px"><b>Registrarse</b></div>
            </td>
            <td width="40%" style=" padding-right: 20px; padding-left: 20px; border-collapse: collapse;">
                <div align="left"><b>Ingresar</b></div>
            </td>
        </tr>
        <tr valign="top">
            <td width="30%" style="border-right: 1px solid gray;  border-collapse: collapse;padding-right: 20px; padding-left: 20px;">
            <table style="vertical-align: top;">
                <g:form controller="login" action="guestLogin" method='POST' id='loginFormLeft' class=''
                        autocomplete='on'>
                    <g:hiddenField name="j_username" value="invitado"/>
                    <g:hiddenField name="j_password" value="invitado"/>
                    <input type="hidden" name="urlRedirect" value="${postUrl}">

                    <tr>
                        <td><label for='nombre'>Nombre:</label></td>
                        <td><g:textField name="nombre" id="nombre" size="20"/></td>
                    </tr>
                    <tr>
                        <td><label for='sexo'>Sexo:</label></td>
                        <td><g:select name="sexo" from="${['M', 'F']}" id="sexo"/></td>
                    </tr>
                    <tr>
                        <td><label for='busco'>Busco:</label></td>
                        <td><g:select name="busco" from="${['M', 'F']}" id="busco"/></td>
                    </tr>

                    </table>


                    <div align="center" style="padding-bottom: 3px">
                        <input type='submit' id="submitLeft" class="button" value='Ingresar como Invitado'/>
                    </div>
                </g:form>

            </td>
            <td width="30%" style="border-right: 1px solid gray;  border-collapse: collapse;padding-right: 20px; padding-left: 20px;">
                <table style="vertical-align: top;">
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <div align="center" style="padding-left: 50px">
                                <g:link controller="persona" action="create">
                                    <input type="submit" class="button" value="Nuevo Usuario">
                                </g:link>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        %{--<td>
                            <div align="center" style="padding-left: 50px">
                                <g:link controller="persona" action="create">
                                    <input type="submit" class="button" value="Facebook">
                                </g:link>
                            </div>
                        </td>--}%
                        <td>
                            <div align="left" style="padding-bottom: 3px"><b>O ingresar con</b></div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <div align="center" style="padding-left: 50px">
                                <g:link controller="persona" action="create" style="color: #ffffff;">
                                    <img src="${createLinkTo(dir: 'images/icons', file:'fb_icon.jpeg' )}" width="42px"
                                         height="42px" alt="Facebook"/>
                                </g:link>
                                <g:link controller="persona" action="create" style="color: #ffffff;">
                                    <img src="${createLinkTo(dir: 'images/icons', file:'gp_icon.png' )}" width="40px"
                                         height="40px" alt="Google+"/>
                                </g:link>
                            </div>
                        </td>
                    </tr>
                </table>

            </td>
            <td width="40%" style=" padding-right: 20px;  border-collapse: collapse;padding-left: 20px;">
                <form action='${postUrl}' method='POST' id='loginFormRigth' class='' autocomplete='off'>
                    <table style="vertical-align: top;">
                        <tr>
                            <td><label for='username'>Usuario:</label></td>
                            <td><input type='text' class='text_' name='j_username' id='username'/></td>
                        </tr>
                        <tr>
                            <td><label for='password'>Contraseña:</label></td>
                            <td><input type='password' class='text_' name='j_password' id='password'/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>

                    <div align="center">
                        <input type='submit' id="submit" class="button"
                               value='Ingresar'/>
                    </div>
                </form>

            </td>
        </tr>

    </table>
</div>

<br>

<div align="center">
    <hr noshade width="90%" align="center">
</div>

<br>

<div id="videolesson" align="center">
    <table>
        <tr>
            <td><b>Ver Video Tutorial</b></td>
            <td><iframe width="500" height="300" src="http://www.youtube.com/embed/em8krTUsVLE" frameborder="0"
                        allowfullscreen></iframe></td>
        </tr>
    </table>
</div>

<br>

<div align="center">
    <hr noshade width="90%">
</div>

<br>

<div id="matchs" align="center">
    <g:if test="${listaParejas}">
    <table border="1" width="800px" style="border-radius: 2%;border-style: solid;border-collapse: collapse;">
        <tr bgcolor="gray" style="color: #ffffff;">
            <th colspan="3">Ya hemos formado las siguientes parejas:</th>
        </tr>
        <g:set var="counter" value="${1}"/>
        <g:each in="${listaParejas}" var="pareja">
            <tr align="center1">
                <td><b>Pareja ${counter}</b></td>
                <td>${pareja.getKey().getFullName()}</td>
                <td>${pareja.getValue().getFullName()}</td>
            </tr>
            <g:set var="counter" value="${counter+1}"/>
        </g:each>
    </table>
    </g:if>
</div>
</body>
</html>
